<template>
  <div class="friend_info">
    <div class="base_info">
      <div class="left">
        <el-avatar :src="item.avatar" shape="square" :size="50"></el-avatar>
      </div>
      <div class="right">
        <div class="name">
          用户名:
          {{ item.username }}
        </div>
        <div class="nickname shallow">备注: {{ nickname }}</div>
        <div class="sign shallow">
          签名:
          {{ item.sign ? item.sign : '这家伙很懒,什么也没留下' }}
        </div>
        <div class="area shallow">地域:{{ item.area }}</div>
      </div>
    </div>
    <div class="info">
      <div class="edit_nickname">
        <span class="shallow">备注:</span>
        <el-input
          v-model="keyword"
          placeholder="修改备注,确定修改请按下回车键"
          @keyup.enter="changeNickname(item.id)"
        ></el-input>
      </div>
      <div class="friend_about">
        <div class="look_me item">
          <span>看我的圈子</span>
          <el-switch v-model="me" @change="changeLook(item.id)" />
        </div>
        <div class="look_his item">
          <span>看他的圈子</span>
          <el-switch v-model="him" @change="changeLook(item.id)" />
        </div>
      </div>
      <div class="btn">
        <el-button type="primary">发消息</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const emit = defineEmits(['changeNickname', 'changeLook'])
const props = defineProps({
  item: {
    type: Object,
    default: () => {}
  },
  lookme: {
    type: [Boolean, Number],
    default: false
  },
  lookhim: {
    type: [Boolean, Number],
    default: false
  },
  nickname: {
    type: String,
    default: ''
  }
})

const keyword = ref('') // 备注
const me = ref(false) // 看我的圈子
const him = ref(false) // 看他的圈子

onMounted(() => {
  me.value = props.lookme ? true : false
  him.value = props.lookhim ? true : false
})

// 修改备注
const changeNickname = (id) => {
  emit('changeNickname', { nickname: keyword.value, id })
  keyword.value = ''
}

// 修改圈子查看
const changeLook = (id) => {
  console.log({ id, me: me.value, him: him.value })
  emit('changeLook', { id, me: me.value, him: him.value })
}
</script>

<style lang="scss" scoped>
.friend_info {
  color: #333;
  .base_info {
    display: flex;
    align-items: center;
    .left {
      margin-right: 15px;
    }

    .right {
      line-height: 20px;
    }
  }
  .info {
    margin-top: 15px;
    .edit_nickname {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;

      ::v-deep .el-input__wrapper {
        box-shadow: none;
      }
      .el-input {
        width: 300px;
        margin-left: 5px;
      }
    }
    .friend_about {
      margin-top: 15px;
      .item {
        display: flex;
        justify-content: space-between;
      }
    }
    .btn {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }
  }
}
</style>
